<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>props的基本使用</title>
</head>

<body>
    <div id="test0"></div>
    <div id="test"></div>
    <div id="test1"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        //1 创建类式组件
        class Person extends React.Component {
            render() {
                console.log(this)
                const { name, age, sex } = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }
        }
        //2 渲染组件到页面
        ReactDOM.render(<Person name='小李' sex="女" age='23' />, document.getElementById('test0'))
        //简写
        const person = { name: '小李', sex: "女", age: '23' }
        ReactDOM.render(<Person name={person.name} sex={person.sex} age={person.age} />, document.getElementById('test'))
        //简写 ...person babel + react 允许 标签传递属性时展开对象
        ReactDOM.render(<Person {...person} />, document.getElementById('test1'))
    </script>
</body>
</html>